<template>
  <div>
    <el-card class="box-card">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="用户名"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="密码"
            type="password"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>

        <el-form-item>
          <el-row>
            <el-col :span="5">
              <el-button type="primary" @click="handleLogin">登陆</el-button>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-col>
            <el-col :span="5" :offset="5">
              <el-button type="text" @click.native="toRegister">
                <span>暂无账号，去注册</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- dfsdfds -->
  </div>
</template>
<script>
import * as common from '@/common/common'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      // console.log('验证用户名')

      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      // console.log('验证密码')
      if (!value) {
        callback(new Error('请输入密码'))
      }
      if (value.length < 3) {
        callback(new Error('密码最低三位数'))
      } else {
        callback()
      }
    }
    return {

      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      }

    }
  },
  computed: {
    redirectPath() {
      return this.$route.query.redirect
    }
  },
  created() {
  },
  methods: {
    toRegister() {
      this.$router.push('/lr/register')
    },
    async handleLogin() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/login', this.loginForm).then(res => {
            // this.$message('登陆成功')
            this.$notify({
              title: '成功',
              message: '登陆成功',
              type: 'success',
              duration: 1500
            })
            common.setItemToStorage('token', res.object)
            this.$store.dispatch('user/getUserInfo').then(res => {
              // 保存用户信息在本地
              common.setItemToStorage('userInfo', res.object)
              // 获取收货地址，获取订单，获取购物车信息
              this.$store.dispatch('cart/getCarts', res.object.id)
              this.$store.dispatch('address/getUserAddress', res.object.id)
              this.$store.dispatch('order/getUserOrderList', res.object.id)
            }).catch(() => {
              this.$nitify.error({
                title: '失败',
                message: '获取用户信息失败'
              })
            })

            this.$router.push('/welcome')
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '登陆失败',
            duration: 1500
          })
          return false
        }
      })
    },
    handleReset() {
      this.$refs['loginForm'].resetFields()
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
